<template>
  <div style="font-size: 14px;">
    <div style="width: 100%;text-align: center;margin-bottom: 10px">
      <div style="width: 80%;margin:0 auto;">
        <search/>
      </div>
    </div>
    <div style="background-color: #ffffff;color: gray;">
      <div style="margin: 0 100px;">
        <div style="height: 40px;line-height: 40px;font-weight: bold;font-size: 18px;">第一类医疗器械推荐商品</div>
        <good-list :products="products"></good-list>
        <el-empty description="暂无商品" v-if="products == undefined || products.length <= 0"></el-empty>


    </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :page-sizes="[8,16,24,36]"
        @pagination="getList"
      />
    </div>

  </div>

</template>

<script>
import {listMedical3} from "../../../api/system/medical";
import GoodList from "../../components/goodsList";
import Search from "../search/search";

export default {
  components: {Search, GoodList},
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        medTypeId:1,
      },
      products: [],
      form:{
        medTypeId:1,
      }
    };
  },
  created() {
    this.getList()
  },
  methods: {
    //获取数据
    getList(){
      listMedical3(this.queryParams).then(response => {
        this.products = response.rows
        this.total = response.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style>
.product:hover{
  cursor: pointer;
  transform: scale(1.05);
  border-top: 1px solid red!important;
}

.picimg{
  height: 150px;
  weight: 150px;
}
</style>
